<template>
  <view class="order-list flexc">
    <view class="tabs-wrap flex">
      <view
        :class="tabCurrent == index ? 'ac' : ''"
        v-for="(item, index) in tabList"
        :key="index"
        @click="tabCurrent = index">
        {{ item }}
      </view>
    </view>
    <view class="flex1 over">
      <scroll-view scroll-y="true" style="height: 100%">
        <view class="wrap">
          <view class="box" v-for="(item, index) in 10" :key="index">
            <view class="flex-between">
              <view class="time">上传时间：2023-23-23</view>
              <view class="status">{{ tabList[1].title }}</view>
            </view>
            <view class="t">教师基础信息</view>
            <view class="flex f-b">
              <view class="" @click="goPage(index)">表单详情</view>
              <view class="">确认信息</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="f-btn">
      <view class="" @click="show = true">任务申请</view>
    </view>
    <u-popup
      :show="show"
      :round="10"
      mode="center"
      @close="() => (show = false)">
      <view class="pop-wrap">
        <view class="pop-t">任务申请</view>
        <view class="pop-box">
          <view
            :class="checkIndex == index ? 'ac' : ''"
            v-for="(item, index) in 4"
            @click="checkIndex = index">
            不老屯中学教职工请假申请
          </view>
        </view>
        <view class="pop-btn flex-between">
          <view class="">取消</view>
          <view class="" @click="toRoute('/refund-submit-success')">确认</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabCurrent: 0,
      tabList: ["全部", "待确认", "待审核", "已完成"],
      show: false,
      checkIndex: 0,
    };
  },
  methods: {
    tabClick(e) {},
    goPage(k) {
      this.toRoute({
        path: "/teacher-info",
        query: {
          type: k,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .u-popup {
  flex: 0 !important;
}
.order-list {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  .tabs-wrap {
    height: 88upx;
    background: #fff;
    & > view {
      padding: 24upx 0;
      width: 25%;
      text-align: center;
    }
    .ac {
      border-bottom: 8upx solid #f49c0d;
    }
  }
  .wrap {
    padding: 24upx 32upx;
    background: #f6f6f6;
    .box {
      background: #ffffff;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      padding: 34upx 24upx 40upx;
      margin-bottom: 24upx;
      .time {
        font-size: 24rpx;
        color: #999999;
      }
      .status {
        font-size: 24rpx;
        color: #f40d0d;
      }
      .t {
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        margin: 22upx 0 34upx;
      }
      .f-b {
        justify-content: flex-end;
        & > view {
          width: 160rpx;
          height: 64rpx;
          background: #f6f6f6;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          text-align: center;
          line-height: 64upx;
          font-size: 24rpx;
          color: #333333;
        }
        & > view:nth-of-type(2) {
          background: #f49c0d;
          color: #ffffff;
          margin-left: 24upx;
        }
      }
    }
  }
  .f-btn {
    padding: 8upx 32upx;
    & > view {
      height: 80rpx;
      background: #f49c0d;
      border-radius: 64rpx 64rpx 64rpx 64rpx;
      text-align: center;
      line-height: 80upx;
      width: 100%;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
  .pop-wrap {
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    padding: 58upx 24upx 0;
    .pop-t {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      margin-bottom: 42upx;
      text-align: center;
    }
    .pop-box {
      margin-bottom: 48upx;
      & > view {
        margin-bottom: 16upx;
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
        height: 72rpx;
        background: #f6f6f6;
        border-radius: 36rpx 36rpx 36rpx 36rpx;
        width: 100%;
        text-align: center;
        line-height: 72upx;
      }
      .ac {
        background: #f49c0d;
        color: #ffffff;
      }
    }
    .pop-btn {
      & > view {
        width: 306rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80upx;
        background: #f6f6f6;
        font-size: 28rpx;
        color: #000000;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
      }
      & > view:nth-of-type(2) {
        background: #f49c0d;
        color: #ffffff;
      }
    }
  }
}
</style>
